import { ConfigProvider, QRCode } from "ant-design-vue";
import { computed, defineComponent } from "vue";
import { useConfigStore } from "@/stores/config";

export default defineComponent({
    name: "Qrcode",
    props: {
        bgColor: {
            type: String,
            default: "#fff", // 修改 ant design 默认的背景
        },
    },
    setup(props, { attrs }) {
        // 关于 ant-design-vue v4 定制主题, 参考: https://antdv.com/docs/vue/customize-theme-cn
        const configTheme = computed(() => {
            return {
                token: {
                    colorPrimary: useConfigStore().config.EpThemeColor || "#409EFF",
                },
            };
        });

        return () => (
            <ConfigProvider theme={configTheme.value}>
                <QRCode bgColor={props.bgColor} {...attrs} />
            </ConfigProvider>
        );
    },
});
